
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>cbnu jquery</title>
		<script type="text/javascript" src="js/jquery-1.10.2.js"></script>
		<style>
			html, body {
				background: #777;
				padding: 0px;
				margin: 0px;
				height: 100%;
				width: 100%;	}
			#wrap {				
				width: 700px;
				margin:0 auto;
				position: relative;}
			#main-handle {
				width: 480px;
				float: right;
				background:#fff;
				border-bottom-left-radius:10px;
				border-bottom-right-radius:10px; }
			#main-list {
				margin: 0; 
				height: 25px;
				padding: 10px 0 0 15px; }
			#main-list li {
				display: inline;
				list-style: none;}
			#main-list li a {
				font-size: 14px;
				text-decoration: none;
				color: #1f1f1f;
				font-family: Helvetica, sans-serif;
				text-transform: uppercase;
				padding: 10px;
				position: relative;
				top: -2px;	}
			#sub-bar {
				background: #000;
				min-height: 10px;}
			#main-list li .sub-list li a{ 
				color: #fff;}
			#main-list li .sub-list li a:hover{
				color: #FFCC00;}
			.sub-list {
				position: absolute;
				top: -30px;
				left: 170px;
				display: none;}

			#main-list li a.close{
				display: none;}
			#main-list li a.close:hover{
				color: #CC0000;
				background: transparent;	}
			#main-list li a.active{
				background: #000;
				color:#fff;	}
		</style>
	</head>
	<body>

		<div id="sub-bar"> </div>

		<div id="wrap">
		  <div id="main-handle">
			  <ul id="main-list">
				<li><a class="main-link" href="#">Home</a>
					<ul class="sub-list">
						<li><a href="#">Home</a></li>
					</ul>
				</li>
				<li><a class="main-link" href="#">menu1</a>
				  <ul class="sub-list">
					<li><a href="#">submenu1</a> </li>
					<li><a href="#">submenu2</a> </li>
					<li><a href="#">submenu3</a> </li>
					<li><a href="#">submenu4</a> </li>
					<li><a href="#">submenu5</a> </li>
				  </ul>
				</li>
				<li><a class="main-link" href="#">menu2</a>
				  <ul class="sub-list">
					<li><a href="#">submenu1</a> </li>
					<li><a href="#">submenu2</a> </li>
					<li><a href="#">submenu3</a> </li>
				  </ul>
				</li>
				<li><a class="main-link" href="#">menu3</a>
				  <ul class="sub-list">
					<li><a href="#">submenu1</a> </li>
					<li><a href="#">submenu2</a> </li>
				  </ul>
				</li>
				<li><a class="main-link" href="#">menu4</a>
					<ul class="sub-list">
					<li><a href="#">submenu1</a> </li>
					</ul>
				</li>
				<li><a class="main-link" href="#">menu5</a>
					<ul class="sub-list">
					<li><a href="#">submenu1</a> </li>
					<li><a href="#">submenu2</a> </li>
					<li><a href="#">submenu3</a> </li>
					<li><a href="#">submenu4</a> </li>
					</ul>
				</li>
				 <li><a class="close" href="#">X</a></li>
			  </ul>
			</div>
		 </div>

		<script type="text/javascript">
			$(function(){
 
				$("#main-list li .main-link").mouseover(function(){
					$("#main-list li .close").fadeIn();
					$("#main-list li .main-link").removeClass("active");		
					$(this).addClass("active");
					$("#sub-bar").animate({height: "40px"});
					$(".sub-list").hide();
					$(this).siblings(".sub-list").fadeIn();	
				});

				$("#main-list li .close").click(function(){
					$("#main-list li .main-link").removeClass("active");	
					$(".sub-list").fadeOut();
					$("#sub-bar").animate({height: "10px"});
					$("#main-list li .close").fadeOut();
				});
			});
		</script>
     </body>
</html>
